<template>
	<div class="page-main-body-box">
		<template>
			<div class="banner" @mouseover="enter" @mouseleave="leave" v-show="sliders && sliders.length > 0">
				<swiper ref="mySwiper" :options="swiperOptions">
					<swiper-slide v-for="(item,index) in sliders" :key="item.sort">
						<img :src="item.thumb" :name="item.url" />
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>

		</template>
		<div class="contanier">


			<template v-if="!loading2">
				<div class="infos">
					<div class="infohalf">
						<div class="halftitle">
							<span class="span1">最新公告</span>
							<span class="span2" @click="totype1">了解更多<i class="el-icon-arrow-right"></i></span>
						</div>
						<div class="halfitem" v-for="(item,index) in type1list">
							<div class="halfitemtitle" @click="totype1detail(item)">{{item.title}}</div>
							<div class="halfitemcont">{{item.info}}</div>
							<div class="halfitemdate">{{item.createTime}}</div>
						</div>
					</div>
					<div class="infohalf">
						<div class="halftitle">
							<span class="span1">考试安排</span>
							<span class="span2" @click="totype2">了解更多<i class="el-icon-arrow-right"></i></span>
						</div>
						<div class="halfitem" v-for="(item,index) in type2list">
							<div class="halfitemtitle" @click="totype2detail(item)">{{item.title}}</div>
							<div class="halfitemcont">{{item.info}}</div>
							<div class="halfitemdate">{{item.createTime}}</div>
						</div>
					</div>
				</div>
				<div class="flowdiv"></div>
			</template>
			<template v-else>
				<div class="box">
					<skeletonHome></skeletonHome>
				</div>
			</template>
		</div>
		<nav-footer :status="true" style="position: relative;bottom: unset;"></nav-footer>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
	import 'swiper/css/swiper.css'
	import IndexVodV1 from './components/vod-v1.vue'
	import IndexLiveV1 from './components/live-v1.vue'
	import IndexLearnpathV1 from './components/learnpath-v1.vue'
	import IndexTopicV1 from './components/topic-v1.vue'
	import IndexBookV1 from './components/book-v1.vue'
	import IndexMsV1 from './components/ms-v1.vue'
	import IndexTgV1 from './components/tg-v1.vue'
	import NavFooter from '../../components/footer.vue'
	import SkeletonHome from '../../components/skeleton/skeletonHome.vue'
	import SkeletonBanner from '../../components/skeleton/skeletonBanner.vue'
	import navs from '../../js/mock/navs.js'
	import sliders from '../../js/mock/sliders.js'
	import blocks from '../../js/mock/blocks.js'
	import latest from '../../js/mock/latest.js'
	import links from '../../js/mock/navs.js'

	var vm = null
	export default {
		components: {
			Swiper,
			SwiperSlide,
			IndexVodV1,
			IndexLiveV1,
			IndexLearnpathV1,
			IndexTopicV1,
			IndexBookV1,
			IndexMsV1,
			IndexTgV1,
			NavFooter,
			SkeletonHome,
			SkeletonBanner,
		},
		data() {
			return {
				type1list: [],
				type2list: [],
				loading2: true,
				sliders: [
					{
						sort:1,
						url:'在线考试系统',
						thumb:require('@/assets/img/ban1.jpg')
					},{
						sort:2,
						url:'在线考试系统',
						thumb:require('@/assets/img/ban2.jpg')
					},{
						sort:3,
						url:'在线考试系统',
						thumb:require('@/assets/img/ban3.jpg')
					}
				],


				pageName: 'index',
				loading: true,
				notice: null,
				
				blocks: [],
				swiperOptions: {
					direction: 'horizontal',
					loop: true,
					autoplay: {
						stopOnLastSlide: false,
						disableOnInteraction: false,
						delay: 3000,
					},
					pagination: {
						el: '.swiper-pagination',
						type: 'bullets',
						clickable: true,
					},
					effect: 'slide',
					on: {
						click: function(e) {
							let url = e.target.name
							if (url) {
								if (
									url.match('https:') ||
									url.match('http:') ||
									url.match('www')
								) {
									window.location.href = url
								} else {
									vm.$router.push({ path: url })
								}
							}
						},
					},
				},
			}
		},
		created() {
			vm = this
		},
		computed: {
			...mapState(['isLogin', 'user']),
			swiper() {
				return this.$refs.mySwiper.$swiper
			},
		},
		filters: {
			filterlong(txt) {
				if (txt.length > 66) {
					return txt.substring(0, 66) + '······'
				} else {
					return txt
				}
			}
		},
		mounted() {
			// if (this.swiper.length > 1) {
			// 	this.swiperOptions.loop = true
			// } else {
			// 	this.swiperOptions.loop = false
			// }
			// this.getSliders()
			// this.getPageBlocks()
			// this.getNotice()
			this.getlist1()
		},
		activated() {
			this.$utils.scrollTopSet(this.pageName)
		},
		beforeRouteLeave(to, from, next) {
			this.$utils.scrollTopRecord(this.pageName)
			next()
		},
		methods: {
			totype1() {
				this.$router.push({
					name: 'Notice'
				})
			},
			totype1detail(item) {
				this.$router.push({
					name: 'Noticedetail',
					query: { id: item.id }
				})
			},
			totype2() {
				this.$router.push({
					name: 'Arrange'
				})
			},
			totype2detail(item) {
				this.$router.push({
					name: 'Arrangedetail',
					query: { id: item.id }
				})
			},
			async getlist1() {
				var res = await this.$api.Notice.Getlist({ type: 'newtype1' })
				this.type1list = res.data.items
				var res = await this.$api.Notice.Getlist({ type: 'newtype2' })
				this.type2list = res.data.items
				this.loading2 = false
			},
			enter() {
				this.$refs.mySwiper.$swiper.autoplay.stop()
			},
			leave() {
				this.$refs.mySwiper.$swiper.autoplay.start()
			},
			getSliders() {
				this.sliders = sliders.data.data
				// console.log('sli',this.sliders)
				// this.loading = true
				// this.$api.ViewBlock.Sliders({ platform: 'PC' }).then(res => {
				// 	this.sliders = res.data
				// 	this.loading = false
				// })
			},
			getPageBlocks() {
				this.blocks = blocks.data.data
				console.log('bbb', this.blocks)
				// this.loading2 = true
				// this.$api.ViewBlock.PageBlocks({
				// 	platform: 'pc',
				// 	page_name: 'pc-page-index',
				// }).then(res => {
				// 	this.blocks = res.data
				// 	this.loading2 = false
				// })
			},
			getNotice() {
				this.$api.Home.Announcement().then(res => {
					this.notice = res.data
				})
			},
		},
	}
</script>
<style lang="less" scoped>
	.bannerdiv {
		width: 100%;
		height: 23vw;
		// background: url('~@/assets/banner.jpg');
		// background-size: 100% 100%;
	}

	.contanier {
		width: 1200px;
		min-height: 500px;
		margin: 0 auto;

		.infos {
			width: 100%;
			margin-top: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.infohalf {
				width: 48%;

				.halftitle {
					display: flex;
					height: 60px;
					justify-content: space-between;
					align-items: center;
					color: #134B9F;
					border-bottom: 1px solid #ccc;
				}

				.span1 {
					font-weight: bold;
					font-size: 22px;
					border-bottom: 3px solid #134B9F;
					height: 100%;
					line-height: 60px;
				}

				.span2 {
					font-size: 16px;
					margin-right: 10px;

					i {
						color: #134B9F;
					}
				}

				.halfitem {
					height: 80px;
					position: relative;
					border-bottom: 1px solid #ccc;

					.halfitemtitle {
						height: 20px;
						font-size: 16px;
						color: #000;
						margin-top: 6px;

						&:hover {
							color: #134B9F;
						}
					}

					.halfitemcont {
						height: 45px;
						font-size: 13px;
						color: #595959;
						margin-top: 8px;
						line-height: 22px;
					}

					.halfitemdate {
						position: absolute;
						bottom: 8px;
						right: 0;
						color: #134B9F;
						font-size: 13px;

					}
				}
			}
		}

		.flowdiv {
			width: 100%;
			height: 298px;
			background: url('~@/assets/img/flow.png');
			background-size: 100% 100%;
			margin-top: 20px;
		}

		.tips {
			border-radius: 0px 0px 16px 16px;
			overflow: hidden;
		}

		.banner {
			width: 100%;
			height: 300px;
			margin-top: 30px;
			border-radius: 16px 16px 0 0;
			overflow: hidden;

			.swiper-container {
				width: 100%;
				height: 100%;

				.swiper-slide {
					width: 100%;
					height: 100%;

					img {
						width: 100%;
						cursor: pointer;
					}
				}
			}
		}

		.box {
			width: 100%;
			box-sizing: border-box;
			padding-top: 40px;

			.code-box {
				width: 100%;
				overflow: hidden;
			}
		}
	}

	.main-menu {
		padding: 20px 0 20px;
		background: #fff;
		display: flex;
		justify-content: center;
	}

	.main-menu-box {
		padding: 5px 0 0;
		overflow: hidden;
	}

	.main-menu-box .item {
		width: 280px;
		height: 166px;
		position: relative;
		float: left;
		margin-right: 26px;
		position: relative;
	}

	.main-menu-box .item:last-child {
		margin-right: 0;
	}

	.main-menu-box .item .item-box {
		display: block;
		width: 280px;
		height: 161px;
		color: #fff;
		border-radius: 10px;
		overflow: hidden;
		background-color: rgb(0, 169, 255);
		position: absolute;
		left: 0;
		top: 0;
	}

	.main-menu-box .item .item-box:hover {
		top: -5px;
		box-shadow: 0px 2px 6px 2px rgba(24, 68, 104, 0.2);
	}

	.main-menu-box .item .title {
		padding-left: 25px;
		padding-top: 21px;
		font-size: 30px;
		line-height: 44px;
		font-weight: normal;
	}

	.main-menu-box .item .desc {
		padding-left: 25px;
		font-size: 18px;
		line-height: 31px;
		font-weight: normal;
		margin-bottom: 8px;
	}

	.main-menu-box .item .btns {
		margin-left: 25px;
		width: 89px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 18px;
		background: #fff;
		border-radius: 15px;
		color: #00a9ff;
	}

	.main-menu-box .item .watermark {
		width: 168px;
		height: 138px;
		position: absolute;
		right: -48px;
		bottom: -21px;
		background: url('../../assets/img/watermark.png') no-repeat center center;
	}

	.main-menu-box .item:nth-child(2) .item-box {
		background: #ffb03f;
	}

	.main-menu-box .item:nth-child(2) .btns {
		color: #ffb03f;
	}

	.main-menu-box .item:nth-child(3) .item-box {
		background: #4edbc2;
	}

	.main-menu-box .item:nth-child(3) .btns {
		color: #4edbc2;
	}

	.main-menu-box .item:nth-child(4) .item-box {
		background: #987dfe;
	}

	.main-menu-box .item:nth-child(4) .btns {
		color: #987dfe;
	}
</style>
